<template>
  <div>
      <!-- 面包屑导航 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>权限管理</el-breadcrumb-item>
        <el-breadcrumb-item>权限列表</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 卡片视图 -->
      <el-card>
          <!-- 表格 stripe隔行变色-->
           <el-table
            :data="rightsList"
            border
            stripe>
            <!-- 表格序号 -->
            <el-table-column type="index"></el-table-column>
            <el-table-column
                prop="authName"
                label="权限名称"
                width="200">
            </el-table-column>
            <el-table-column
                prop="path"
                label="路径"
                width="200">
            </el-table-column>
            <el-table-column
                prop="level"
                label="权限等级"
                width="200">
                <!-- 按照等级展示不同的标签等级，因为要显示不同的状态，所以加上 template标签实现 -->
                <template slot-scope="scope">
                    <el-tag v-if='scope.row.level==="0"'>一级</el-tag>
                    <el-tag v-if='scope.row.level==="1"' type="success">二级</el-tag>
                    <el-tag v-if='scope.row.level==="2"' type="warning">三级</el-tag>
                </template>
            </el-table-column>
          </el-table>
      </el-card>
  </div>
</template>

<script>
    export default {
        name:'Rights',
        data(){
            return{
                // 保存权限信息
                rightsList:[],
            }
        },
        created(){
            this.getRightsList()
        },
        methods:{
            // 发送AJAX请求
            async getRightsList(){
                const {data:res} = await this.$http.get('rights/list')
                console.log(res);
                if(res.meta.status!==200) return this.$message.error('获取权限列表失败')
                this.rightsList=res.data
            }
        }
    }
</script>

<style scoped>
    .el-breadcrumb{
        margin-bottom: 20px;
    }

</style>